 <template>
   <view :style="themeColor">
     <view class="page">
       <view class="flex benben-position-layout flex flex-wrap align-center participationRecord_flex_0"
         :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
         <view class='flex flex-wrap align-center justify-between flex-sub participationRecord_fd0_0'>
           <view class='flex flex-wrap align-center participationRecord_fd0_0_c0' @tap.stop="handleJumpDiy"
             data-type="back" data-url="1">
             <text class='fu-iconfont2  participationRecord_fd0_0_c0_c0'>&#xE794;</text>
           </view>
           <view class='flex flex-wrap align-stretch justify-center'>
             <text class='participationRecord_fd0_0_c1_c0'>参与列表</text>
           </view>
           <view class='flex flex-wrap align-center justify-end participationRecord_fd0_0_c0'>
           </view>
         </view>

       </view>
       <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
       <!---flex布局flex布局开始-->
       <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout participationRecord_flex_1"
         v-if=" participateList.length>='1'">
         <template v-for='(item,key0) in participateList'>
           <view @tap.stop="handleJumpDiy" data-type="navigateTo"
             :data-url="`/pages/wode/myFans/userHome?uid=${item.user_id}`"
             class='flex flex-direction flex-wrap align-stretch participationRecord_fd1_0' :key='key0'>
             <view class='flex flex-wrap align-center justify-between participationRecord_fd1_0_c0'>
               <view class='flex flex-wrap align-center'>
                 <image class='participationRecord_fd1_0_c0_c0_c0' mode="aspectFill" :src='item.avatar'></image>
                 <view class='flex flex-direction flex-wrap align-start'>
                   <text class='participationRecord_fd1_0_c0_c0_c1_c0'>{{item.user_nickname}}</text>
                   <view class='flex flex-wrap align-center participationRecord_fd1_0_c0_c0_c1_c1'>
                     <text class='participationRecord_fd1_0_c0_c0_c1_c1_c0'>{{item.fans}}</text>
                     <text class='participationRecord_fd1_0_c0_c0_c1_c1_c0'>粉丝</text>
                     <text class='participationRecord_fd1_0_c0_c0_c1_c1_c2'>{{item.post}}</text>
                     <text class='participationRecord_fd1_0_c0_c0_c1_c1_c0'>帖子</text>
                   </view>
                 </view>
               </view>
               <button class='participationRecord_fd1_0_c0_c1'
                 @tap.stop="followCancellationFunc(item.user_id,item.is_colmont)"
                 v-if=" item.is_colmont==0">关注</button><button class='participationRecord_fd1_0_c0_c1_1'
                 @tap.stop="followCancellationFunc(item.aid,item.is_colmont)" v-if=" item.is_colmont=='1'">已关注</button>
             </view>
             <view class='flex flex-wrap align-center participationRecord_fd1_0_c1'>
               <text class='participationRecord_fd1_0_c0_c0_c1_c1_c0'>{{item.create_time}}</text>
               <view class='flex flex-wrap align-center justify-end flex-sub'>
                 <text class='participationRecord_fd1_0_c0_c0_c1_c1_c0' v-if=" item.check_status=='2'">已同意</text>
                 <text class='participationRecord_fd1_0_c0_c0_c1_c1_c0' v-if=" item.check_status=='4'">已取消</text>
                 <button class='participationRecord_fd1_0_c1_c1_c1_c0' v-if=" item.check_status<'3' && item.is_clear==1"
                   @tap.stop="calcel(item)">取消</button>
                 <view class='flex flex-wrap align-center' v-if=" item.check_status=='1'&& item.is_auth==1">
                   <button class='participationRecord_fd1_0_c1_c1_c1_c0'
                     @tap.stop="organizationalReviewFunc(item.aid,3)">拒绝</button>
                   <button class='participationRecord_fd1_0_c1_c1_c1_c1'
                     @tap.stop="organizationalReviewFunc(item.aid,2)">同意</button>
                 </view>
               </view>
             </view>
           </view>
         </template>

       </view>

       <!---flex布局flex布局结束-->
       <!---flex布局flex布局开始-->
       <view class="flex flex-direction flex-wrap align-center benben-flex-layout participationRecord_flex_2"
         v-if=" participateList.length<'1'">
         <image class='participationRecord_fd2_0' mode="aspectFit" :src='STATIC_URL+"49.png"'></image>
       </view>

       <!---flex布局flex布局结束-->


     </view>
     <benben-popup v-model="popupShow1704966493349" :mask="true" :mask-close-able="true" mode='center' :z-index='999'>
       <!---取消参加flex布局开始-->
       <view class="flex benben-flex-layout flex-wrap align-center">
         <view class='flex flex-direction flex-wrap align-center qrganizationalBureau_fd3_0'>
           <text class='qrganizationalBureau_fd3_0_c0'>提示</text>
           <text class='qrganizationalBureau_fd3_0_c1'>取消后不能再次报名，确定取消
             参加吗？</text>
           <view class='flex align-center qrganizationalBureau_fd3_0_c2'>
             <button class='qrganizationalBureau_fd3_0_c2_c0' @tap.stop="popupShow1704966493349=false">取消</button>
             <button class='qrganizationalBureau_fd3_0_c2_c1' @tap.stop="cancelParticipationFunc()">确认</button>
           </view>
         </view>
       </view>

       <!---取消参加flex布局结束-->

     </benben-popup>
   </view>
 </template>
 <script>
   import {
     validate
   } from '@/common/utils/validate.js'

   export default {
     components: {},


     data() {
       return {
         "participateList": [],
         "aid": "1",
         address: {
           latitude: '',
           longitude: '',
           city: ''
         },
         "postoffice_id": "",
         "popupShow1704966493349": false,
       };
     },
     computed: {
       themeColor() {
         return this.$store.getters.themeColor
       },

     },
     watch: {},
     onLoad(options) {
       let {
         aid
       } = options
       if (aid !== undefined) this.aid = aid
       this.getParticipateFunc()
     },
     onUnload() {

     },
     onReady() {

     },
     onShow() {
       if (uni.getStorageSync('gugeaddress')) {
         this.address.latitude = uni.getStorageSync("gugeaddress").longitude
         this.address.longitude = uni.getStorageSync("gugeaddress").longitude
         this.address.city = uni.getStorageSync("gugeaddress").addresstxt
       } else {
         uni.getLocation({
           type: 'wgs84',
           // #ifdef APP
           geocode: true,
           // #endif
           isHighAccuracy: true,
           success: adr => {
             console.log('adradradradr', adr)
             const obj = {
               latitude: adr.latitude,
               longitude: adr.longitude,
               addresstxt: ''
             }
             uni.setStorageSync('gugeaddress', obj)
             that.address = uni.getStorageSync('gugeaddress')

           },
           fail: fail => {
             that.$message.info(JSON.stringify(complete))
             console.log('complete', complete)
           }
         })
       }
     },
     onHide() {

     },
     onResize() {

     },
     onPullDownRefresh() {
       this.getParticipateFunc()
     },
     onReachBottom(e) {

     },
     onPageScroll(e) {

     },
     methods: {
       calcel(item) {
         this.postoffice_id = item.aid
         this.popupShow1704966493349 = true
       },
       //取消参局
       async cancelParticipationFunc() {
         //请求方法
         //数据验证

         let data657a60c34225e = await this.$api.post(global.apiUrls.post657a60c34225e, {
           postoffice_id: this.postoffice_id
         });
         this.popupShow1704966493349 = false
         if (data657a60c34225e.data.code != 1) {
           this.$message.info(data657a60c34225e.data.msg);
           return
         }



         this.getParticipateFunc()
       },
       //获取参加记录
       async getParticipateFunc() {
         //请求方法
         //数据验证

         let dataparticipateList = await this.$api.post(global.apiUrls.post657980fdf1011, {
           postoffice_id: this.aid
         });

         if (dataparticipateList.data.code != 1) {
           this.$message.info(dataparticipateList.data.msg);
           return
         }
         let infoparticipateList = dataparticipateList.data.data;
         this.participateList = infoparticipateList.data

       },
       //组局审核
       async organizationalReviewFunc(aid, check_state) {
         //请求方法
         //数据验证

         let data65798340ed0a3 = await this.$api.post(global.apiUrls.post65798340ed0a3, {
           aid: aid,
           check_status: check_state
         });

         if (data65798340ed0a3.data.code != 1) {
           this.$message.info(data65798340ed0a3.data.msg);
           return
         }
         this.getParticipateFunc()


       },
       //用户关注取消
       async followCancellationFunc(user_id, action) {
         //请求方法
         //数据验证

         let data657822ffc15db = await this.$api.post(global.apiUrls.post657822ffc15db, {
           user_id_2: user_id,
           action: action
         });

         if (data657822ffc15db.data.code != 1) {
           this.$message.info(data657822ffc15db.data.msg);
           return
         }



       }
     }
   };
 </script>
 <style lang="scss" scoped>
   .qrganizationalBureau_fd3_0_c2_c1 {
     background: rgba(255, 255, 255, 1);
     font-size: 32rpx;
     color: rgba(100, 80, 235, 1);
     width: 270rpx;
     height: 101rpx;
     line-height: 101rpx;
     font-weight: 500;
   }

   .qrganizationalBureau_fd3_0_c2_c0 {
     border-right: 1px solid #eee;
     background: #fff;
     font-size: 32rpx;
     color: rgba(153, 153, 153, 1);
     width: 270rpx;
     height: 101rpx;
     line-height: 101rpx;
     font-weight: 400;
   }

   .qrganizationalBureau_fd3_0_c2 {
     border-top: 1px solid #eee;
     margin: 51rpx 0rpx 0rpx 0rpx;
   }

   .qrganizationalBureau_fd3_0_c1 {
     line-height: 44rpx;
     font-size: 28rpx;
     font-weight: 500;
     color: #333333;
     text-align: center;
     margin: 32rpx 40rpx 0rpx 40rpx;
   }

   .qrganizationalBureau_fd3_0_c0 {
     line-height: 44rpx;
     font-size: 36rpx;
     font-weight: 700;
     color: #333333;
     margin: 40rpx 0rpx 0rpx 0rpx;
   }

   .qrganizationalBureau_fd3_0 {
     background: #fff;
     width: 540rpx;
     background-size: 100% auto !important;
     border-radius: 16rpx 16rpx 16rpx 16rpx;
   }

   .page {
     width: 100vw;
     overflow-x: hidden;
     min-height: calc(100vh - var(--window-bottom));
     background: rgba(248, 248, 248, 1);
     background-size: 100% auto;
   }

   .participationRecord_flex_0 {
     background: #fff;
     width: 750rpx;
     height: 88rpx;
     overflow: hidden;
     z-index: 10;
     top: 0rpx;
     background-size: 100% auto !important;
   }

   .participationRecord_fd0_0_c1_c0 {
     font-size: 36rpx;
     font-weight: 700;
     color: #333333;
     line-height: 50rpx;
   }

   .participationRecord_fd0_0_c0_c0 {
     font-size: 36rpx;
     color: #333;
   }

   .participationRecord_fd0_0_c0 {
     width: 120rpx;
   }

   .participationRecord_fd0_0 {
     padding: 0rpx 32rpx 0rpx 32rpx;
   }

   .participationRecord_flex_1 {
     padding: 24rpx 32rpx 0rpx 32rpx;
   }

   .participationRecord_fd1_0_c1_c1_c1_c1 {
     border: 1px solid rgba(100, 80, 235, 1);
     background: rgba(255, 255, 255, 1);
     border-radius: 50rpx;
     width: 112rpx;
     line-height: 56rpx;
     font-size: 24rpx;
     color: rgba(100, 80, 235, 1);
     margin: 0rpx 0rpx 0rpx 24rpx;
   }

   .participationRecord_fd1_0_c1_c1_c1_c0 {
     border: 1px solid rgba(153, 153, 153, 1);
     background: rgba(255, 255, 255, 1);
     border-radius: 50rpx;
     width: 112rpx;
     line-height: 56rpx;
     font-size: 24rpx;
     color: rgba(153, 153, 153, 1);
     margin: 0rpx 0rpx 0rpx 24rpx;
   }

   .participationRecord_fd1_0_c1 {
     margin: 24rpx 0rpx 0rpx 0rpx;
   }

   .participationRecord_fd1_0_c0_c1_1 {
     border: 1px solid #eee;
     background: rgba(255, 255, 255, 1);
     border-radius: 33rpx 33rpx 33rpx 33rpx;
     width: 112rpx;
     line-height: 56rpx;
     font-size: 24rpx;
     color: rgba(191, 191, 191, 1);
   }

   .participationRecord_fd1_0_c0_c1 {
     background: rgba(100, 80, 235, 1);
     border-radius: 33rpx 33rpx 33rpx 33rpx;
     width: 112rpx;
     line-height: 56rpx;
     font-size: 24rpx;
     color: #fff;
   }

   .participationRecord_fd1_0_c0_c0_c1_c1_c2 {
     color: #999999;
     font-size: 24rpx;
     font-weight: 400;
     line-height: 32rpx;
     margin: 0rpx 0rpx 0rpx 26rpx;
   }

   .participationRecord_fd1_0_c0_c0_c1_c1_c0 {
     color: #999999;
     font-size: 24rpx;
     font-weight: 400;
     line-height: 32rpx;
   }

   .participationRecord_fd1_0_c0_c0_c1_c1 {
     margin: 6rpx 0rpx 0rpx 0rpx;
   }

   .participationRecord_fd1_0_c0_c0_c1_c0 {
     color: #333333;
     font-size: 28rpx;
     font-weight: 700;
     line-height: 32rpx;
   }

   .participationRecord_fd1_0_c0_c0_c0 {
     width: 80rpx;
     height: 80rpx;
     border-radius: 100rpx;
     margin: 0rpx 20rpx 0rpx 0rpx;
   }

   .participationRecord_fd1_0_c0 {
     border-bottom: 1px solid #eee;
     padding: 32rpx 0rpx 32rpx 0rpx;
   }

   .participationRecord_fd1_0 {
     background: rgba(255, 255, 255, 1);
     border-radius: 16rpx;
     background-size: 100% auto;
     margin: 0rpx 0rpx 24rpx 0rpx;
     padding: 0rpx 24rpx 24rpx 24rpx;
   }

   .participationRecord_flex_2 {
     padding: 219rpx 0rpx 0rpx 0rpx;
   }

   .participationRecord_fd2_0 {
     width: 440rpx;
     height: 358rpx;
     border-radius: 0rpx 0rpx 0rpx 0rpx;
   }
 </style>
